<template>
	<view class="paymentBox">
		<uv-navbar title="提交凭证" @leftClick="goBack" bgColor="#277CC0" :placeholder="true"
			titleStyle="color:#FFFFFF;fontWeight:500" leftIconColor="#FFFFFF"></uv-navbar>
		<view class="orderInfo">
			<text>订单编号：{{orderdetail.order_sn}}</text>
			<text class="t2">
            {{orderdetail.status==0?'待确认':orderdetail.status==1?'待支付':orderdetail.status==2?'已支付':'已完成'}}
            </text>
		</view>
		<view class="addressBox">
			<view class="a_Title">
				说明：请扫描下方二维码进行付款，并在付款居回到本页面提交付款截图凭证，方便客服核对。
			</view>
			<view class="a_info">
				第一步：请扫描二维码，并填写金额完成付款， 若您已经完成扫描付款，请忽略，前往下一步提交凭证。
			</view>
			<view class="carInfo">
                    <image :src="payImg" mode="aspectFit"></image>
			</view>
		</view>
		
		<view class="checkCarImg">
			<view class="">
			    第二步：请上传付款凭证截图，方便客服核对
			</view>
			<!--添加照片-->
            
            
			<view class="addImgBox">
                <view class="posRelative" v-if="form.pay_image">
                <image :src="form.pay_image" mode=""></image>
                <view class="posAbsort rt0 top0">
                        <uv-icon  @click="delImg()" name="close-circle"  size="28" ></uv-icon>
                </view>
                </view>
                <block v-else>
                    <view class="addImg" @click="uploadFile()">
                        <uv-icon name="plus" color="#C7C7C7" size="28"></uv-icon>
                    </view>
				请点击上传付款凭证截图</block>
				
			</view>
		</view>
	
		
		<!--立即支付-->
		<view class="payMoney" >
			
			<view class="payBtn" @click="addCarImgdata">
				提交
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fileList1: [],
                id:"",
                orderdetail:{},
                
                form:{
                    order_id:"",
                    pay_image:""
                },
                imgList:[],
                payImg:""
			};
		},
        onLoad(opt) {
            this.getPayMode()
            if(opt.id){
                this.id = opt.id
                this.getDetail()
                this.form.order_id =  opt.id
                
            }
        },
		methods: {
            async getPayMode(){
                const {code,data}  = await  this.$api.paymentCode()
                
                if(code==1){
                    this.payImg = data
                }
                
            },
            delImg(){
              this.form.pay_image = ''  
            },
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
            async  getDetail(){
              const {code,data}  = await  this.$api.orderdetail({id:this.id})
              console.log(data)
              if(code==1){
                  this.orderdetail = data
              }
            
            },
			//添加照片
			addImgBtn() {
				this.$refs.addCarImg.open();
			},
			coleAddImg(){
				this.$refs.addCarImg.close();
			},
			//合同按钮
			contractBtn() {
				this.$refs.dzContract.open();
			},
			//合同弹窗关闭
			contractClose() {
				this.$refs.dzContract.close();
			},
			//更多照片
			moreImg() {
				this.$refs.checkCar.open();
			},
			//验证车弹窗关闭
			carImgClose() {
				this.$refs.checkCar.close();
			},
            async getCartImg(){
                    const {data}  =   await  this.$api.cartImage({order_id:this.id})
                    
                    this.imgList = data.list
                    
            },
            uploadFile (type, directory) {
              let vm = this
              uni.chooseImage({
                count: 1, //最多可以选择的图片总数
                // sizeType: sizeType, // 可以指定是原图还是压缩图，默认二者都有
                // sourceType: sourceType, // 可以指定来源是相册还是相机，默认二者都有
                success: async (res) => {
                  let data = {
                    filePath: res.tempFilePaths[0],
                    formData: {
                      directory
                    },
                    header: {
                        // #ifdef MP
                        'Content-Type': 'application/x-www-form-urlencoded',
                        // #endif
                      'Token': uni.getStorageSync('logintoken')
                    }
                  }
                  vm.$api.uploadImg(data).then(res => {
                        vm.form.pay_image=res.fullurl
                  })
                },
              })
            },
            addCarImgdata(){
                    
                   
                    // if(!this.form.pay_image) return this.$utils.msg('请上传支付凭证')
                    // uni.showLoading({
                    //     title:'加载中'
                    // })
                    // this.$api.addPayImage(this.form).then(res=>{
                    //     uni.hideLoading()
                        
                    //     if(res.code==1){
                    //         this.$utils.msg('添加成功')
                    //         setTimeout(()=>{
                    //             uni.reLaunch({
                    //                 url:'/pages/tabbar/myOrder'
                    //             })
                    //         },800)
                    //     }else{
                    //         this.$utils.msg(res.msg)
                    //     }
                    // })
                    
            }
		}
	}
</script>

<style lang="scss" scoped>
	.paymentBox {
		min-height: 100vh;
		background-color: #F5F5F5;
		padding-bottom: 97rpx;
        position: relative;
		.orderInfo {
			font-size: 24rpx;
			color: #000000;
			line-height: 61rpx;
			padding: 0rpx 20rpx;
			display: flex;
			justify-content: space-between;
			font-weight: 600;

			.t2 {
				color: #D72031
			}
		}

		.addressBox {
			width: 750rpx;
			background-color: #FFFFFF;
			padding: 33rpx 20rpx ;

			.a_Title {
				margin-bottom: 26rpx;
                font-weight: 400;
                font-size: 23rpx;
                color: #FF0000;
				
			}

			.a_info {
				width: 710rpx;
				.item_info {
					line-height: 49rpx;
					display: flex;
					font-size: 26rpx;
					color: #222222;

					.i1 {
						flex-basis: 0rpx;
						flex-grow: 1;
					}
				}
			}

			.carInfo {
                text-align: center;
				
                image{
                    width: 500rpx;
                    height: 500rpx;
                    margin: 40rpx auto;
                }
			}
		}

		
		.checkCarImg {
			margin-top: 16rpx;
			background-color: #FFFFFF;
			width: 750rpx;
			// height: 306rpx;
			padding: 25rpx;

			.title_car {
				display: flex;
				justify-content: space-between;
				align-items: center;

				text {
					font-size: 24rpx;
					color: #000000;
					font-weight: 600;
				}

				.moreBox {
					display: flex;
					color: #555555;
					font-size: 20rpx;
				}
			}

			.imgBox {
				display: flex;
				margin-top: 30rpx;

				.imgItem {
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-right: 17rpx;
					font-size: 20rpx;
					color: #666666;

					image {
						height: 162rpx;
						width: 163rpx;
						margin-bottom: 16rpx;
					}
				}
			}

			.addImgBox {
				
				display: flex;
				align-items: center;
				color: #555555;
				font-size: 20rpx;
				margin-top: 27rpx;
                image{
                    width: 300rpx;
                    height: 300rpx;
                    border-radius: 6rpx;
                }
			}

			
		}

		.remarkBox {
			width: 750rpx;
			height: 71rpx;
			background-color: #FFFFFF;
			margin-top: 22rpx;
			display: flex;
			align-items: center;
			font-size: 26rpx;
			color: #555555;
			padding-left: 23rpx;

			text {
				color: #000000;
				font-size: 24rpx;
				padding-right: 13rpx;
			}

		}
        .moneyText{
			margin-top: 20rpx;
			line-height: 50rpx;
			font-size: 30rpx;
			color: #D72031;
			font-weight: 600;
			padding-left: 21rpx;
		}
		.payMoney{
			position: fixed;
			bottom: 0rpx;
			width: 750rpx;
			height: 118rpx;
			display: flex;
			justify-content:space-between;
			background-color: #FFFFFF;
			align-items: center;
			padding: 0rpx 21rpx;
			text{
				font-size: 30rpx;
				color: #D72031;
				font-weight: 600;
			}
			.payBtn {
				width: 710rpx;
				height: 80rpx;
				background: rgba(39, 124, 192, 1);
				border-radius: 6rpx;
				color: #ffffff;
				font-size: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			
				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 11rpx;
				}
			}
		}
		.contractBox {
			
			// height: 853rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			padding: 0rpx 38rpx;

			.titleBox {
				display: flex;
				justify-content: space-between;
				align-items: center;

				text {
					font-size: 28rpx;
					font-weight: 600;
				}
			}

			.iptBox {
				margin-top: 33rpx;
			}

			.uploadInfo {
				margin-top: 14rpx;
				display: flex;
				align-items: center;
                image{
                    width: 109rpx;
                    height: 108rpx;
                    border-radius: 6rpx;
                    margin-right: 11rpx;
                }
			}
			.sureBtn{
				width: 597rpx;
				height: 59rpx;
				background: #277CC0;
				border-radius: 12rpx;
				cursor: pointer;
				line-height: 59rpx;
				margin: 0 auto;
				color:#FFFFFF;
				font-size: 26rpx;
				text-align: center;
				margin-top: 30rpx;
			}

			.infoItem {
				font-size: 26rpx;
				color: #222222;
				line-height: 49rpx;

				text {
					display: inline-block;
					width: 260rpx;
				}
			}

			.addressInfo {
				width: 603rpx;
				margin: 0 auto;
				margin-top: 41rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				text {
					font-size: 36rpx;
					color: #2E2E2E;
					font-weight: 600;
				}

				image {
					width: 166rpx;
					height: 17rpx;
					margin: 0rpx 60rpx;
				}
			}

			.timeInfo {
				width: 600rpx;
				height: 117rpx;
				background: #F5F5F5;
				border-radius: 6rpx;
				margin: 0 auto;
				margin-top: 30rpx;
				padding-left: 22rpx;
				padding-top: 10rpx;

				.tiem_info {
					display: flex;
					align-items: center;
					color: #222222;
					font-size: 26rpx;
					line-height: 49rpx;

					.i1 {
						flex-basis: 0rpx;
						flex-grow: 1;
					}
				}
			}

			.carInfoBox {
				margin-left: 23rpx;
				font-size: 22rpx;
				color: #222222;
				line-height: 49rpx;

				text {
					padding-right: 20rpx;
				}
			}

			.imgAllBox {
				height: 800rpx;
				// width: 640rpx;
				// overflow-x: hidden;
                margin-top: 20rpx;
				overflow: auto;
			}

			.imgBox {
				image {
					border-radius: 6rpx;
				}

				.imgInfo {
					font-size: 26rpx;
					color: #222222;
                    margin: 26rpx 0;
					justify-content: space-between;
				}
			}
		}
        .addImg {
        	width: 109rpx;
        	height: 108rpx;
        	background: #F5F5F5;
        	border-radius: 6rpx;
        	display: flex;
        	align-items: center;
        	justify-content: center;
        	margin-right: 11rpx;
        }
	}
</style>